<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <table border="1" cellpadding="0" cellspacing="0" id="TableToExport" class="TableToExport">
      <thead data-v-fa3bdc62="">
        <tr data-v-fa3bdc62="">
          <th data-v-fa3bdc62="" rowspan="2">
            <div data-v-fa3bdc62="" class="ivu-table-cell text-center">
              学院机构
            </div>
          </th>
          <th data-v-fa3bdc62="" rowspan="2">
            <div data-v-fa3bdc62="" class="ivu-table-cell text-center">人员类型</div>
          </th>
          <th data-v-fa3bdc62="" rowspan="2">
            <div data-v-fa3bdc62="" class="ivu-table-cell text-center">使用人数</div>
          </th>
          <th data-v-fa3bdc62="" rowspan="2">
            <div data-v-fa3bdc62="" class="ivu-table-cell text-center">使用人次</div>
          </th>
          <th data-v-fa3bdc62="" rowspan="2">
            <div data-v-fa3bdc62="" class="ivu-table-cell text-center">使用时长</div>
          </th>
          <th data-v-fa3bdc62="" colspan="2">
            <div data-v-fa3bdc62="" class="ivu-table-cell text-center">性别分布</div>
          </th>
          <th data-v-fa3bdc62="" colspan="3">
            <div data-v-fa3bdc62="" class="ivu-table-cell text-center">运动项目</div>
          </th>
          <th data-v-fa3bdc62="" colspan="2">
            <div data-v-fa3bdc62="" class="ivu-table-cell text-center">花费明细</div>
          </th>
        </tr>
        <tr data-v-fa3bdc62="">
          <th data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">男</div></th>
          <th data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">女</div></th>
          <th data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">羽毛球</div></th>
          <th data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">篮球</div></th>
          <th data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">网球</div></th>
          <th data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">支出金额</div></th>
          <th data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">退款金额</div></th>
        </tr>
      </thead>
      <tbody data-v-fa3bdc62="" class="ivu-table-tbody">
        <tr data-v-fa3bdc62="">
          <td data-v-fa3bdc62="" rowspan="1">
            <div data-v-fa3bdc62="" class="ivu-table-cell text-center">材料科学系</div>
          </td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">职工</div></td>
          <td data-v-fa3bdc62="">2001-12-12</td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">11</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">17</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">0</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">100</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">9</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">1</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">1</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">375.13</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">0</div></td>
        </tr>
      </tbody>
      <tbody data-v-fa3bdc62="" class="ivu-table-tbody">
        <tr data-v-fa3bdc62="">
          <td data-v-fa3bdc62="" rowspan="2">
            <div data-v-fa3bdc62="" class="ivu-table-cell text-center">测试学院</div>
          </td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">职工</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">1</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">11</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">17</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">0</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">100</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">9</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">1</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">1</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">375.13</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">0</div></td>
        </tr>
        <tr data-v-fa3bdc62="">
          <!---->
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">家属</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">1</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">11</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">17</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">0</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">100</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">9</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">1</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">1</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">375.13</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">0</div></td>
        </tr>
      </tbody>
      <tbody data-v-fa3bdc62="" class="ivu-table-tbody">
        <tr data-v-fa3bdc62="">
          <td data-v-fa3bdc62="" colspan="2">
            <div data-v-fa3bdc62="" class="ivu-table-cell text-center">职工汇总</div>
          </td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">1</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">11</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">1020</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">0</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">100</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">9</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">1</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">1</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">375.13</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">0</div></td>
        </tr>
        <tr data-v-fa3bdc62="">
          <td data-v-fa3bdc62="" colspan="2">
            <div data-v-fa3bdc62="" class="ivu-table-cell text-center">全体汇总</div>
          </td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">1</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">11</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">1020</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">0</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">100</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">9</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">1</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">1</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">375.13</div></td>
          <td data-v-fa3bdc62=""><div data-v-fa3bdc62="" class="ivu-table-cell text-center">0</div></td>
        </tr>
        <!---->
      </tbody>
    </table>
    <button type="primary" onclick="aaa()">导出</button>

    <script>
      function aaa() {
        tableToExcel({ tableid: 'TableToExport' });
      }
      /**
       * 网页导出
       */
      const tableToExcelFns = {
        formatExcel: (s, c) => {
          return s.replace(/{(\w+)}/g, function(m, p) {
            return c[p];
          });
        },
        base64: s => {
          return window.btoa(unescape(encodeURIComponent(s)));
        },
        findEle: function(ele, tr, imgWidth, imgHeight) {
          if (ele.parentNode.nodeName != 'TD') {
            ele = ele.parentNode;
            this.findEle(ele, tr, imgWidth, imgHeight);
          } else {
            ele.parentNode.setAttribute('width', imgWidth ? imgWidth + 20 : 120);
            ele.parentNode.setAttribute('id', 'imgTd');
            const tr_tds = tr.getElementsByTagName('td');
            if (tr_tds && tr_tds.length) {
              const tr_tds_ = Array.from(tr_tds);
              if (!window.tdIndex) {
                window.tdIndex = tr_tds_.findIndex(function(ele) {
                  return ele.getAttribute('id') == 'imgTd';
                });
              }
            }
          }
        },
        delTd: (table, tdType, delFirstCell, delEndCell, imgWidth, imgHeight, direction) => {
          const colgroups = table.getElementsByTagName('colgroup');
          if (colgroups && colgroups.length) {
            colgroups[0].parentNode.removeChild(colgroups[0]);
          }
          const trs = table.getElementsByTagName('tr');
          let trsArray = Array.from(trs);
          trsArray.forEach(tr => {
            if (tdType == 'th') {
              const trths = tr.getElementsByTagName('th');
              const trths_ = Array.from(trths);
              if (window.tdIndex && trths_[window.tdIndex]) {
                trths_[window.tdIndex].setAttribute('width', imgWidth ? imgWidth + 20 : 120);
                if (trths_[window.tdIndex].getElementsByTagName('div')) {
                  trths_[window.tdIndex].getElementsByTagName('div')[0].style.width =
                    (imgWidth ? imgWidth + 20 : 120) + 'px';
                }
              }
            }
            const trImgs = tr.getElementsByTagName('img');
            if (trImgs && trImgs.length) {
              const trImgs_ = Array.from(trImgs);
              // 如果图片是横向排版
              if (direction == 'horizontal') {
                // 找出每个单元格最多的图片个数
                if (window.imgLen) {
                  if (window.imgLen < trImgs_.length) {
                    window.imgLen = trImgs_.length;
                  }
                } else {
                  window.imgLen = trImgs_.length;
                }
              }
              trImgs_.forEach(ig => {
                ig.setAttribute('width', imgWidth ? imgWidth : 100);
                ig.setAttribute('height', imgHeight ? imgHeight : 100);
                // 反查TD
                tableToExcelFns.findEle(ig, tr, imgWidth, imgHeight);
              });
            }
            const trHeight = getComputedStyle(tr).height;
            tr.style.height = trHeight;
            // 删除每一行第一个单元格
            if (delFirstCell) {
              const tr_td_first = tr.getElementsByTagName(tdType || 'td')[0];
              if (tr_td_first) {
                tr_td_first.parentNode.removeChild(tr_td_first);
              }
            }
            // 删除每一行最后一个单元格
            if (delEndCell) {
              const tdLen = tr.getElementsByTagName(tdType || 'td').length;
              const tr_td_last = tr.getElementsByTagName(tdType || 'td')[tdLen - 1];
              if (tr_td_last) {
                tr_td_last.parentNode.removeChild(tr_td_last);
              }
            }
          });
          // 如果是框架写的table并且是带图片
          if (tdType == 'th') {
            if (direction == 'horizontal') {
              if (trs && trs[0]) {
                const ths = trs[0].getElementsByTagName('th');
                ths[window.tdIndex ? window.tdIndex - 1 : 0].setAttribute('colspan', window.imgLen);
                ths[window.tdIndex ? window.tdIndex - 1 : 0].setAttribute(
                  'width',
                  (window.imgLen || 1) * (imgWidth || 100)
                );
                ths[window.tdIndex ? window.tdIndex - 1 : 0].style.width =
                  (window.imgLen || 1) * (imgWidth || 100) + 'px';
              }
            }
            window.excelThead = table.innerHTML;
          } else {
            if (direction == 'horizontal') {
              trsArray.forEach(tr => {
                const tds = tr.cells;
                for (let a = 0; a < tds.length; a++) {
                  const aele = tds[a];
                  // 把td里面的div全部替换掉
                  if (aele.children && aele.children[0] && aele.children[0].className === 'ivu-table-cell') {
                    const nContent = aele.children[0].innerHTML.replace(/div/gi, 'span');
                    aele.innerHTML = nContent;
                  }
                }
                const trImgs = tr.getElementsByTagName('img');
                const trImgs_ = Array.from(trImgs);
                const imgsLen = window.imgLen || 0;
                for (let i = 0; i < imgsLen; i++) {
                  var ntd = tr.insertCell((window.tdIndex || 0) + i);
                  ntd.setAttribute('width', imgWidth + 10 || 100);
                  ntd.style.border = '0px';
                  if (trImgs_[i]) {
                    ntd.setAttribute('height', imgHeight + 10 || 100);
                    trImgs_[i].removeAttribute('style');
                    trImgs_[i].style.padding = '2px';
                    ntd.innerHTML = trImgs_[i].outerHTML;
                  } else {
                    ntd.setAttribute('colspan', imgsLen - trImgs_.length > 0 ? imgsLen - trImgs_.length : 0);
                    break;
                  }
                }
                tr.deleteCell(window.tdIndex - 1);
              });
            }
            window.excelTbody = table.innerHTML;
          }
        },
        // IVIEW TABLE
        setTableTrHeight: (tableid, delFirstCell, delEndCell, imgWidth, imgHeight, direction) => {
          const tableEle_ = document.getElementsByClassName(tableid || 'customTable')[0];
          const tableEle = tableEle_.cloneNode(true);
          if (tableEle) {
            const delEle = tableEle.getElementsByClassName('ivu-table-tip');
            if (delEle && delEle.length) {
              delEle[0].parentNode.removeChild(delEle[0]);
            }
            const table0 = tableEle.getElementsByTagName('table')[0];
            const table1 = tableEle.getElementsByTagName('table')[1];
            if (table1) {
              tableToExcelFns.delTd(table1, 'td', delFirstCell, delEndCell, imgWidth, imgHeight, direction);
            }
            if (table0) {
              tableToExcelFns.delTd(table0, 'th', delFirstCell, delEndCell, imgWidth, imgHeight, direction);
            }
          }
        },
        // 原生TABLE
        setNativeTableTrHeight: (tableid, imgWidth, imgHeight) => {
          const tableEle_ = document.getElementsByClassName(tableid || 'customTable')[0];
          const tableEle = tableEle_.cloneNode(true);
          const trs = tableEle.getElementsByTagName('tr');
          let trsArray = Array.from(trs);
          trsArray.forEach(tr => {
            const trImgs = tr.getElementsByTagName('img');
            if (trImgs && trImgs.length) {
              const trImgs_ = Array.from(trImgs);
              trImgs_.forEach(ig => {
                ig.setAttribute('width', imgWidth ? imgWidth : 100);
                ig.setAttribute('height', imgHeight ? imgHeight : 100);
                // 反查TD
                tableToExcelFns.findEle(ig, tr, imgWidth, imgHeight);
              });
            }
            const trHeight = getComputedStyle(tr).height;
            tr.style.height = trHeight;
          });
          window.excelTbody = tableEle.innerHTML;
        }
      };
      /**
       * @auth fuzb 网页导出 暂不支持多个单元格包含图片情况
       * @param {String} tableCreate 是否是iview框架创建table
       * @param {String} tableid 表格class
       * @param {String} sheetName 下载文件名
       * @param {String} delFirstCell 是否删除第一个单元格（例如多选框不需要）
       * @param {String} delLastCell 是否删除最后一个单元格（例如操作一栏不需要）
       * @param {String} imgWidth  图片宽度
       * @param {String} imgHeight 图片高度
       * @param {String} direction  图片排版方式（横纵排列）
       * @param {Fn} callback 回调函数
       */
      function tableToExcel(opts, callback) {
        var { tableCreate, tableid, sheetName, delFirstCell, delLastCell, imgWidth, imgHeight, direction } = opts;
        if (tableCreate == 'iview') {
          tableToExcelFns.setTableTrHeight(tableid, delFirstCell, delLastCell, imgWidth, imgHeight, direction);
        } else {
          tableToExcelFns.setNativeTableTrHeight(tableid, imgWidth, imgHeight);
        }
        var uri = 'data:application/vnd.ms-excel;base64,';
        var template =
          '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +
          'xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>' +
          '<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>' +
          '</x:ExcelWorkbook></xml><![endif]-->' +
          ' <style type="text/css">' +
          'table th {' +
          'height: 40px;' +
          'background: #d9dade;' +
          'color: #000000;' +
          'font-size: 14px;' +
          'padding: 5px 15px;' +
          'word-wrap: break-word;' +
          ' }' +
          'table td {' +
          'height:30px;' +
          'text-align:center;' +
          'color: #000;' +
          'font-size: 14px;' +
          'padding: 5px 15px;' +
          'word-wrap: break-word;' +
          'vertical-align: middle;' +
          ' }' +
          'table small {' +
          'color: #403a3a;' +
          'font-size: 14px;' +
          ' }' +
          'table span {' +
          'padding:3px 10px;' +
          ' }' +
          'table img {' +
          'margin:2px;' +
          ' }' +
          '</style>' +
          '</head><body ><table cellpadding="3" cellspacing="0"  border="1"  rull="all" style="border-collapse: collapse"  class="excelTable">{table}</table></body></html>';

        /*  
            在我们导出excel时，默认单元格格式为常规，没能按照原样导出, 解决:加入一下样式
           +`th,td {
            text-align: center;
            mso-number-format:\@;
            vnd.ms-excel.numberformat:\@;
           }`
          参考:https://blog.csdn.net/qq_33989590/article/details/118567023
          */
        // 如果是IVIEW创建的table需要
        var tableContent = '';
        if (tableCreate == 'iview') {
          tableContent = window.excelThead + window.excelTbody;
        } else {
          const cont = document.getElementsByClassName(tableid);
          if (!tableid.nodeType) tableid = cont[0];
          tableContent = window.excelTbody || cont[0].innerHTML;
        }
        var ctx = { worksheet: sheetName || 'Worksheet', table: tableContent };
        let link = document.createElement('a');
        const content = tableToExcelFns.formatExcel(template, ctx);
        link.href = uri + tableToExcelFns.base64(content);
        link.download = sheetName || document.title;
        document.getElementsByTagName('body')[0].appendChild(link);
        link.click();
        document.getElementsByTagName('body')[0].removeChild(link);
        callback && typeof callback == 'function' && callback();
      }
    </script>
  </body>
</html>
